<template>
  <div class="w1280">
    <el-row class="content">
      <el-col class="right_aside article_right_aside">
        <RightSlider></RightSlider>
      </el-col>
      <el-col class="left_aside">
        <el-card>
          <div>
            <div class="article_detail_top">
              <h1>uni-music:uniapp音乐播放器</h1>
              <div class="notice_area">
                <span class="original">原创</span>
                <div>
                  <div class="top">
                    <span class="time">Delusion</span>
                    <span class="time">于2023-08-18 13:19:20发布</span>
                    <div class="notice_icon">
                      <div>
                        <span><i class="el-icon-view"></i>2273</span>
                        <span><i class="el-icon-finished"></i>20</span>
                        <span><i class="el-icon-chat-dot-round"></i>18</span>
                      </div>
                    </div>
                  </div>
                  <div class="bottom">
                    文章分类：
                    <el-tag type="primary">Vue</el-tag>
                  </div>
                  <p></p>
                </div>
              </div>
            </div>
            <div class="article_detail_info">
              <div v-for="(item, index) in 5" :key="index">
                <h3>JSON返回示例：</h3>
                <div style="width: 100%; overflow: hidden" v-highlight>
                  <pre>
    <code>
        <!-- 代码放置区 -->
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          type: "string",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          type: "string",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          type: "string",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          type: "string",
        },
         {
          date: "2016-05-01",
          name: "王小虎",
          type: "string",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          type: "string",
        },
      ],
    </code>
  </pre>
                </div>
              </div>
            </div>
          </div>
          <div class="article_detail_bottom">
            <span class="userInfo"
              ><img
                src="../static/img/avatar.jpg"
                class="avatar"
              />Delusion</span
            >
            <div class="notice_icon">
              <div>
                <span><i class="el-icon-view"></i>2273</span>
                <span><i class="el-icon-finished"></i>20</span>
                <span @click="drawer = true"
                  ><i class="el-icon-chat-dot-round"></i>18</span
                >
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <ToolsBar></ToolsBar>
    <el-drawer title="评论列表（18）" :visible.sync="drawer">
      <div class="commentsList">
        <div>
          <el-row class="write_area">
            <div>
              <img src="../static/img/avatar.jpg" class="avatar" />
            </div>
            <div
              style="
                display: flex;
                flex-direction: column;
                flex: 1;
                position: relative;
              "
            >
              <el-input
                type="textarea"
                placeholder="请输入内容"
                v-model="textarea"
                minlength="1"
                maxlength="100"
                show-word-limit
                class="comment_write"
                clearable
                rows="5"
              >
              </el-input>
              <el-button type="primary">发送</el-button>
            </div>
          </el-row>
          <ul>
            <li v-for="(item, index) in 30" :key="index">
              <img src="../static/img/avatar.jpg" class="avatar" />
              <div class="info">
                <p>Delusion 2023.08.18</p>
                <p>onTimeUpdate这个方法微信小程序不生效如何解决</p>
              </div>
              <i class="el-icon-finished"></i>
            </li>
          </ul>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import RightSlider from "@/components/rightSlider.vue";
import ToolsBar from "@/components/toolsBar.vue";
export default {
  components: {
    RightSlider,
    ToolsBar,
  },
  data() {
    return {
      searchWord: "",
      activeIndex: 0,
      placeholder: "热门搜索：Node.js",
      drawer: false,
      textarea: "",
    };
  },
  created() {
    this.$on("updateMenuName", (res) => {
      console.log(res);
    });
  },

  methods: {
    handleClose(done) {},
  },
};
</script>
<style>
@import "../assets/css/articleDetail.css";
</style>
